<script setup>
import { useClassificationListStore } from '../../store/classificationList';
import classification from '../../api/classification';
import { useAddClassificationStore } from '../../store/addClassification';
import addClassificationdialog from '../classification/addClassificationdialog.vue';
import { useEditClassificationStore } from '../../store/editClassification';
const editClassificationStore = useEditClassificationStore();
const addClassificationStore = useAddClassificationStore();
const classificationListStore = useClassificationListStore();
async function updateClassificationfalse() {
    await classification.setClassificationSubcategory0(classificationListStore.selectedIds).then((res) => {
        console.log(res)
    })
    await classification.getClassificationList(classificationListStore.pageNum, classificationListStore.pageSize).then((res) => {
        classificationListStore.classificationList = res.data.data
    }).finally(() => {
        classificationListStore.changeLoading()
    })
}
async function updateClassificationsTrue() {

    await classification.setClassificationSubcategory1(classificationListStore.selectedIds).then((res) => {
        console.log(res)
    })
    await classification.getClassificationList(classificationListStore.pageNum, classificationListStore.pageSize).then((res) => {
        classificationListStore.classificationList = res.data.data
    }).finally(() => {
        classificationListStore.changeLoading()
    })
}
async function edit(){
    await classification.getEditClassification(classificationListStore.selectedIds[0]).then((res) => {
        editClassificationStore.EditRufrom = res.data.data
        editClassificationStore.changeSubcategoryIsOpen(true)
    })
}
</script>
<template>
    <div class="classificationListButton">
        <el-button size="small" type="primary" @click="addClassificationStore.changeIsOpen">新增</el-button>
        <el-button
            :disabled="classificationListStore.selectedIds.length === 0 || classificationListStore.selectedIds.length !== 1"
            size="small" type="success" @click="edit">编辑</el-button>
        <!-- 停用按钮：当全部选中项是启用状态时显示 -->
        <el-button v-if="classificationListStore.selectedStatus.isAllActive"
            :disabled="classificationListStore.selectedStatus.allDisabled" size="small" type="danger"
            @click="updateClassificationfalse">
            停用
        </el-button>
        <!-- 启用按钮：当全部选中项是停用状态时显示 -->
        <el-button v-if="!classificationListStore.selectedStatus.isAllActive"
            :disabled="classificationListStore.selectedStatus.allDisabled" size="small" type="success"
            @click="updateClassificationsTrue">
            启用
        </el-button>
        <el-button size="small" type="warning" @click="">导出</el-button>
    </div>
    <addClassificationdialog />
</template>

<style scoped>
.classificationListButton {
    display: flex;
    gap: 1rem;
    margin: 1rem 0 0 2rem;
}
@media (max-width: 768px) {
    .classificationListButton {
        display: flex;
        gap: 0.5rem;
        margin: 1rem 0 0 1rem;
    }
}
</style>